<template>
  <el-dialog
    @close="closeHandler"
    v-model="dialogVisible"
    width="1024px"
    class="dialog-header"
    top="15vh"
  >
    <template #header="{ titleClass }">
      <div class="my-header">
        <p class="demo">
          选择我的兴趣技能&nbsp;&nbsp;<span>{{ array.length }}/7</span>
        </p>
        <p class="exmp">例如舞蹈就选舞种</p>
      </div>
    </template>
    <div class="main">
      <!-- 搜索 -->
      <div class="search">
        <el-input
          class="left"
          size="large"
          :prefix-icon="Search"
          placeholder="搜索兴趣技能"
          v-model="input"
        />
        <el-button type="default" plain size="large">搜索</el-button>
      </div>
      <!-- 选中项目框 -->
      <div class="bread" v-if="!input">
        <div class="bread_row" v-for="(item, index) in array" :key="index">
          <span class="row_button">{{ item.name }}</span>
          <span class="row_icon" @click="deleteBtn(item, index)">X</span>
        </div>
      </div>
      <!-- 推荐兴趣技能 -->
      <p class="interest" v-if="!input">推荐兴趣技能</p>
      <div class="hobby_item" v-if="!input">
        <el-scrollbar height="300px">
          <!-- 每一项 -->
          <div
            class="item_box"
            @click="addEle(item)"
            v-for="item in hobbyList"
            :key="item.id"
          >
            {{ item.name }}
            <!-- 图标 -->
            <div v-if="item.iconShow" class="item_icon">√</div>
          </div>
        </el-scrollbar>
      </div>
      <!-- 添加舞蹈类别 -->
      <div class="additem" v-else>
        <el-row class="searchResult">
          <div class="searchItem">
            <svg
              t="1666356968746"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3682"
              width="44"
              height="44"
            >
              <path
                d="M917.333333 166.4c-106.666667-106.666667-285.866667-106.666667-392.533333 0l-12.8 17.066667-17.066667-12.8C388.266667 64 209.066667 64 102.4 170.666667s-106.666667 285.866667 0 392.533333l375.466667 375.466667c17.066667 17.066667 42.666667 17.066667 59.733333 0l375.466667-375.466667c110.933333-110.933333 110.933333-290.133333 4.266666-396.8z m-59.733333 332.8L512 844.8l-345.6-345.6C85.333333 426.666667 81.066667 302.933333 157.866667 226.133333s192-81.066667 268.8-4.266666l8.533333 8.533333 46.933333 46.933333c17.066667 17.066667 42.666667 17.066667 59.733334 0l46.933333-46.933333c76.8-76.8 196.266667-76.8 273.066667 0 68.266667 72.533333 68.266667 192-4.266667 268.8z"
                p-id="3683"
              ></path>
            </svg>
            <div class="middle">
              <p class="top">{{ input }}</p>
              <P class="bottom">创建兴趣技能</P>
            </div>

            <svg
              @click="addCreate"
              t="1666363775930"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2536"
              width="18"
              height="18"
            >
              <path
                d="M925.696 384q19.456 0 37.376 7.68t30.72 20.48 20.48 30.72 7.68 37.376q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68l-287.744 0 0 287.744q0 20.48-7.68 37.888t-20.48 30.208-30.72 20.48-37.376 7.68q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888l0-287.744-287.744 0q-20.48 0-37.888-7.68t-30.208-20.48-20.48-30.208-7.68-37.888q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68l287.744 0 0-287.744q0-19.456 7.68-37.376t20.48-30.72 30.208-20.48 37.888-7.68q39.936 0 68.096 28.16t28.16 68.096l0 287.744 287.744 0z"
                p-id="2537"
                fill="#b2b5c0"
              ></path>
            </svg>
          </div>
        </el-row>
      </div>
    </div>
    <template #footer v-if="!input">
      <span class="dialog-footer">
        <el-button class="cancel" @click="dialogVisible = false"
          >取消</el-button
        >
        <el-button
          color="#f93684"
          class="confirm"
          @click="dialogVisible = false"
        >
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import mockHome, { type HobbyModel } from "@/api/home";

// // 控制右上角icon显示
// const iconShow = ref(false)
const input = ref("");
// 关闭时的回调
const closeHandler = () => {
  dialogVisible.value = false;
};
// 打开时的回调
const openHandler = () => {
  dialogVisible.value = true;
};
//筛选后的数组
const array = ref([]);
const dialogVisible = ref(false);
const hobbyList = ref<HobbyModel[]>();
//筛选数据
const getHobbyList = async () => {
  try {
    let result = await mockHome.getHobbyList();
    hobbyList.value = result;
    console.log(hobbyList.value);
  } catch (error) {}
};
//添加一个按钮
const addEle = (data) => {
  data.iconShow = !data.iconShow;
  if (array.value.find((item) => item.id == data.id)) {
    array.value = array.value.filter((item) => item.id !== data.id);
  } else {
    if (array.value.length >= 7) {
      data.iconShow = false
      ElMessage.error("超过7个");
      return;
    }
    array.value.push(data);
  }
};
// 添加一个舞蹈项目
const addCreate = () => {
  array.value.push(input.value);
  input.value = "";
};
// 删除一个按钮
const deleteBtn = (item, idx) => {
  array.value.splice(idx, 1);
  item.iconShow = false;
};
onMounted(() => {
  getHobbyList();
});
// 暴露实例的方法
defineExpose({
  openHandler,
  closeHandler
});
</script>
<style lang="less" scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
.interest{
  margin-top: 20px;
}
.my-header .demo {
  font-size: 18px;
}

.my-header .demo span {
  color: #b1b5c1;
  font-size: 16px;
}

.my-header .exmp {
  font-size: 14px;
  color: #b1b5c1;
}
.main .additem {
  padding-top: 20px;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: space-between;
  .searchResult {
    width: 300px;
    height: 68px;
    background-color: #f5f7f9;
    border-radius: 4px;
    padding: 0 15px;
  }
  .searchItem {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .icon {
    width: 44px;
    height: 44px;
  }
  .middle {
    flex: 1;
    padding-left: 5px;
  }
}

.search .left {
  width: 30%;
  padding-right: 10px;
}

.bread {
  margin-top: 20px;
  display: flex;
  justify-content: left;
}

.bread .bread_row {
  width: 100px;
  padding: 10px 20px;
  box-sizing: border-box;
  border: 1px solid #eaecf0;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  display: flex;
  position: relative;
  margin-right: 22px;
  justify-content: center;
  white-space: nowrap;
}

.bread .bread_row .row_icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #b1b5c1;
  color: #fff;
  position: absolute;
  text-align: center;
  line-height: 20px;
  top: -10px;
  right: -10px;
}

.item_box {
  position: relative;
  min-width: 100px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  border-radius: 4px;
  border: 1px solid #eaecf0;
  color: #111;
  background-color: #fff;
  cursor: pointer;
  margin: 0 22px 0px 0;
  display: inline-block;
  font-size: 12px;
  box-sizing: border-box;
  margin-top: 20px;

  .item_icon {
    cursor: pointer;
    position: absolute;
    text-align: center;
    line-height: 20px;
    font-weight: bolder;
    width: 20px;
    color: #fff;
    height: 20px;
    top: -10px;
    right: -10px;
    background: #f93684;
    border-radius: 50%;
    z-index: 99999;
  }
}

.confirm {
  height: 40px;
  padding-left: 0px;
  padding-right: 0px;
  padding: 10px 50px;
  font-size: 12px;
  border-radius: 3px;
  display: inline-block;
  cursor: pointer;
  border: 1px solid #f93684;
  border-color: #dcdfe6;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  user-select: none;
  color: #fff;
  background-color: #f93684;
  margin-left: 10px;
}

.cancel {
  height: 40px;
  padding-left: 0px;
  padding-right: 0px;
  padding: 10px 50px;
  font-size: 12px;
  border-radius: 3px;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-color: #dcdfe6;
  color: #606266;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  user-select: none;
  text-align: center;
}

.cancel:hover {
  color: #f93684;
  border-color: #fdc3da;
  background-color: #feebf3;
}

.confirm:hover {
  color: #fff;
  background-color: #fa5e9d;
  border-color: #f93684;
}
</style>
